.fx-input-number {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;

  &:hover input {
    border-color: $border-color-important;
  }

  &.disabled {
    > input, > .less, > .plus {
      background-color: $input-number-disabled-background;
      cursor: not-allowed;
      border-color: $border-color-default;
      color: $font-color-lowest !important;
      user-select: none;
    }
  }

  &.no-input {
    > .less, > .plus {
      position: relative;
      border: 1px solid $border-color-default;
    }
  }

  &.right {
    input {
      &.large {
        padding: 0 calc(#{$height-large} + 10px) 0 10px;
      }

      &.middle {
        padding: 0 calc(#{$height-middle} + 10px) 0 10px;;
      }

      &.default {
        padding: 0 calc(#{$height-default} + 10px) 0 10px;;
      }

      &.mini {
        padding: 0 calc(#{$height-mini} + 10px) 0 10px;;
      }
    }

    > .less, > .plus {
      top: 1px;
      right: 1px !important;
      left: auto;
      box-sizing: border-box;

      &.large {
        width: calc(#{$height-large} - 2px);
        height: calc((#{$height-large} - 2px) / 2);
        line-height: calc((#{$height-large} - 2px) / 2);
      }

      &.middle {
        width: calc(#{$height-middle} - 2px);
        height: calc((#{$height-middle} - 2px) / 2);
        line-height: calc((#{$height-middle} - 2px) / 2);
      }

      &.default {
        width: calc(#{$height-default} - 2px);
        height: calc((#{$height-default} - 2px) / 2);
        line-height: calc((#{$height-default} - 2px) / 2);
      }

      &.mini {
        width: calc(#{$height-mini} - 2px);
        height: calc((#{$height-mini} - 2px) / 2);
        line-height: calc((#{$height-mini} - 2px) / 2);
      }
    }

    > .less {
      top: 50%;
      border-top: 1px solid $border-color-default;
    }
  }

  > input {
    width: $input-width-default;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid $border-color-default;
    border-radius: $border-radius-default;
    background-color: $input-number-background;
    color: $font-color-default;

    &.is-btn {
      padding: 0 10px !important;
    }

    &:focus {
      border-color: $input-number-focus-border-color;
    }

    &.large {
      height: $height-large;
      line-height: $height-large;
      padding: 0 calc(#{$height-large} + 10px);
    }

    &.middle {
      height: $height-middle;
      line-height: $height-middle;
      padding: 0 calc(#{$height-middle} + 10px);
    }

    &.default {
      height: $height-default;
      line-height: $height-default;
      padding: 0 calc(#{$height-default} + 10px);
    }

    &.mini {
      width: 130px;
      height: $height-mini;
      line-height: $height-mini;
      padding: 0 calc(#{$height-mini} + 10px);
    }
  }

  > .less, > .plus {
    text-align: center;
    position: absolute;
    top: 1px;
    background-color: $input-number-disabled-background;
    color: $font-color-important;
    cursor: pointer;
    user-select: none;

    &:hover {
      color: $input-number-focus-border-color;
    }

    &.disabled {
      background-color: $input-number-disabled-background;
      cursor: not-allowed;
      border-color: #e4e7ed;
      color: $font-color-lowest !important;
      user-select: none;
    }

    &.large {
      width: calc(#{$height-large} - 2px);
      height: calc(#{$height-large} - 2px);
      line-height: calc(#{$height-large} - 2px);
    }

    &.middle {
      width: calc(#{$height-middle} - 2px);
      height: calc(#{$height-middle} - 2px);
      line-height: calc(#{$height-middle} - 2px);
    }

    &.default {
      width: calc(#{$height-default} - 2px);
      height: calc(#{$height-default} - 2px);
      line-height: calc(#{$height-default} - 2px);
    }

    &.mini {
      width: calc(#{$height-mini} - 2px);
      height: calc(#{$height-mini} - 2px);
      line-height: calc(#{$height-mini} - 2px);
    }
  }

  > .less {
    left: 1px;
    border-radius: $border-radius-default 0 0 $border-radius-default;
  }

  > .plus {
    right: 1px;
    border-radius: 0 $border-radius-default $border-radius-default 0;
  }
}
